<template>
  <div class="luck-item">
    <i class="icon" :style="{backgroundImage:`url('${icon}')`}"></i>
    <b class="text">{{text}}</b>
    <span class="percent">
      <i class="cover" :style="{right:`${100-percent}%`}"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: 'luck-item',
  props: {
    icon: String,
    text: String,
    percent: Number
  }
}
</script>

<style lang="stylus">
$icon-size = 20px;
$cover-size = 5px;

.luck-item {
  display: flex;
  align-items: center;
  line-height: 1;
  margin: 20px 0;

  .icon {
    width: $icon-size;
    height: $icon-size;
    background: center / cover no-repeat;
  }

  .text {
    margin-left: 5px;
    font-size: 14px;
  }

  .percent {
    position: relative;
    flex: 1;
    height: 2 * $cover-size;
    margin-left: 20px;
    border-radius: $cover-size;
    background-color: $app-bgc;
    overflow: hidden;

    >.cover {
      position: absolute;
      right: 100%;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: $cover-size;
      background-color: $main-color;
    }
  }
}
</style>
